<!--
 * @Date: 2020-05-22 09:13:32
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-11-11 16:37:36
-->
<template>
  <div :class="{ 'activeOpen': isActive, 'activeClose' : !isActive}" class="active">
    <el-form ref="form" :model="queryParam" size="mini" :inline="true" class="filter-selection" :style="{ display: display }" label-width="110px">
      <slot name="input" />
      <template v-for="item in items">
        <el-form-item :key="item.key" :label="item.label">
          <el-input v-if="item.type === 'input'" v-model.trim="queryParam[item.key]" :placeholder="item.placeholder" clearable @change="val => changeForm(val, item.key)" @keyup.enter.native="handleSearch" @input="inputChange" />
          <el-select v-else-if="item.type === 'select'" :value="queryParam[item.key]" :filterable="item.filterable || false" :multiple="item.multiple || false" :collapse-tags="item.tags || true" :placeholder="item.placeholder" clearable @input="val => changeForm(val, item.key)" @change="handleSearch">
            <el-option v-for="option in item.options" :key="item.key+option.value+new Date().getTime()" :label="option.label" :value="option.value" />
          </el-select>
          <el-cascader v-else-if="item.type === 'cascader'" :value="queryParam[item.key]" :filterable="true" :placeholder="item.placeholder" clearable :options="item.options" :props="item.props || {expandTrigger: 'click',multiple: false}" @input="val => changeForm(val, item.key)" />
          <el-date-picker v-else-if="item.type === 'dataPicker'" v-model="queryParam[item.key]" size="mini" type="date" :value-format="item.valueFormat" :placeholder="item.placeholder" class="wfull" @change="handleSearch" />
          <!-- disabled: 'is_status', -->
          <el-date-picker
            v-else
            :value="queryParam[item.key]"
            :type="item.date || 'datetimerange'"
            :value-format="item.valueFormat"
            :picker-options="isPickerOptions ? (item.pickerOptions || pickerOptions)
              :pickerOption"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            align="left"
            :default-time="['00:00:00', '23:59:59']"
            @input="val => changeForm(val, item.key)"
          />
        </el-form-item>
        <br v-if="item.wrap" :key="item.key + 1">
      </template>
      <el-form-item>
        <slot />
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'FormSelection',
  props: {
    items: {
      type: Array,
      default: () => []
    },
    queryParam: {
      type: Object,
      default: () => {
        return {}
      }
    },
    display: {
      type: String,
      default: 'flex'
    },
    isActive: {
      type: Boolean,
      default: true
    },
    isPickerOptions: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      pickerOption: {
        disabledDate(time) {
          return (
            time.getTime() >
            new Date(
              new Date(new Date().toLocaleDateString()).getTime() +
              24 * 60 * 60 * 1000 - 1
            ).getTime()
          )
        }
      },
      pickerOptions: {
        disabledDate(time) {
          return (
            time.getTime() >
            new Date(
              new Date(new Date().toLocaleDateString()).getTime() +
              24 * 60 * 60 * 1000 -
              1
            ).getTime()
          )
        },
        shortcuts: [
          {
            text: '今天',
            onClick(picker) {
              const today = new Date(
                new Date(new Date().toLocaleDateString()).getTime()
              )
              const tomorrow = new Date(
                new Date(new Date().toLocaleDateString()).getTime() +
                24 * 60 * 60 * 1000 -
                1
              )
              picker.$emit('pick', [today, tomorrow])
            }
          },
          {
            text: '昨天',
            onClick(picker) {
              const today = new Date(
                new Date(new Date().toLocaleDateString()).getTime() - 1
              )
              const yesterday = new Date(
                new Date(new Date().toLocaleDateString()).getTime() -
                24 * 60 * 60 * 1000
              )
              picker.$emit('pick', [yesterday, today])
            }
          },
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      }
    }
  },
  methods: {
    changeForm(val, key) {
      const vm = this
      const form = { ...vm.queryParam }
      form[key] = val
      if (!this.isPickerOptions && key === 'date') {
        if (form[key]) {
          console.log(form[key])
          if (form[key][0].substring(5, 7) !== form[key][1].substring(5, 7)) return vm.$message.error('只能选择自然月内时间段查询数据')
        }
      }
      vm.$emit('update:queryParam', form)
      //   vm.$emit('change', val)
    },
    // 更新input不能输入的问题
    inputChange() { this.$forceUpdate() },
    handleSearch() {
      const vm = this
      vm.$emit('handleSearch')
    }
  }
}
</script>

<style lang="scss">
.filter-selection {
  align-items: center;
  flex-wrap: wrap;
  //   min-height: 120px;
}
.el-form-item--mini.el-form-item {
  margin-bottom: 6px !important;
  margin-right: 5px !important;
}
</style>
